<template>
  <div class="tabs-page">
    <el-tabs v-model="activeTab" class="demo-tabs" @tab-change="handleTabChange">
      <el-tab-pane name="home">
        <template #label>
          <span class="resume-tab-label">职级测试</span>
        </template>
        <div class="tab-content">
          <FillInformation />
        </div>
      </el-tab-pane>
      <el-tab-pane name="salaryTest">
       

         <template #label>
          <span class="resume-tab-label">上传简历一键分析Beta</span>
        </template>
        <div class="tab-content">
          <UploadResume />
        </div>
      </el-tab-pane>
     
    </el-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import FillInformation from '@/views/FillInformation.vue'
import UploadResume from '../components/UploadResume.vue'  // 简历上传

const activeTab = ref('home')

const handleTabChange = (tabName) => {
  console.log('当前激活的标签页:', tabName)
}
</script>

<style scoped>
.tabs-page {
  padding: 20px;
}

.tab-content {
  padding: 20px 0;
  min-height: 500px;
 
}

.demo-tabs {
  width: 100%;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.resume-tab-label {
  font-size: 20px;
  font-weight: bold;
  color: #ff6b35;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
  padding: 5px 10px;
  border-radius: 5px;
  background: linear-gradient(to right, #ffd166, #ff6b35);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: all 0.3s ease;
}

.resume-tab-label:hover {
  transform: scale(1.05);
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
</style>